<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue'
import BaseEcharts from '../BaseEcharts.vue';
import {getMonthRateStat,getMonthReturnRateStat} from '../../../api/index';
onMounted(()=>{
  const today = new Date();
  const year = (today.getFullYear()).toString();
  const month = (today.getMonth() + 1).toString(); // 注意月份从0开始，所以要加1
  let months = year+'-'+(month.length<2?('0'+month):month);
  value3.value = months;
  handleChange(months);
})


defineProps<{title:string}>()
const value3 = ref('');
const showOption = ref(false);
const options = reactive({
  grid: {
    right: "1%",
    left:'-10%',
    bottom: "1%",
    top: "15%",
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    },
    formatter: (val:any)=>{
      return val.map((el:any)=>{
        return `<div>${el.seriesName}:${el.data}%</div>`
      }).join('')
    },
  },
  legend: {
      data: ['领用率', '归还率'], 
      textStyle:{
        color:"#fff"
      }
  },
  xAxis: {
      type: 'category',
      data: ['很长的字符串怎么显示', '分类2', '分类3', '分类4', '分类5'],
      axisLabel: {
      margin: 8,
      interval: 0, // 强制显示所有名称
      textStyle: {
        fontSize: 14,
      },
      formatter: function (params:any) {
        var val = "";
        if (params.length > 3) {
            val = params.substr(0, 3) + '...';
            return val;
        } else {
            return params;
        }
      }
    }
  },
  yAxis: [
      {
          type: 'value',
          position: 'left',
          axisLabel: {
              formatter: '{value} 单位1'
          },show:false
      },
      {
          type: 'value',
          show:false
      }
  ],
  series: [
    {
        name: '领用率',
        type: 'bar',
        data: [20, 30, 40, 50, 60],
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
        
    },
    {
        name: '归还率',
        type: 'bar',
        yAxisIndex: 1, // 指定使用副轴
        data: [15, 25, 35, 45, 55],
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
    },
  ]
})

const handleChange = (val: any) => {
  getMonthRateStat(val).then((resStat)=>{
    options.xAxis.data = resStat.data.map((item: any) => item.name);
    options.series[0].data = resStat.data.map((item: any) => (item.receiveRate*100).toFixed(2));
    console.log( options.series[0].data)
    console.log( resStat.data.map((item: any) => (item.receiveRate*100).toFixed(2)))
  }).then(()=>{
    getMonthReturnRateStat(val).then((res)=>{
      options.series[1].data = res.data.map((item: any) => ( item.returnRate*100).toFixed(2));
      showOption.value = true;
    })
  })
  
}
</script>

<template>
  <div class="toptitlemain centered-gradient">
    <el-date-picker v-model="value3" format="YYYY-MM" size="small" value-format="YYYY-MM" type="month" placeholder="选择月"
        @change="handleChange" style="width: 100px;position: absolute;right: 1vh;top: 1vh;" />
    <div class="bx-title" style="margin-bottom: 2vh;">
      {{ title }}
    </div>
    <BaseEcharts :options="options" v-if="showOption"></BaseEcharts>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain{
  width: 100%;
  height: 50vh;
  display: flex;
  border: 1px solid rgb(92, 98, 107);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 0 1vw;
  box-sizing:border-box;
  color: rgb(192, 215, 255);
  margin-bottom: .5vh;
  flex-direction: column;
  position: relative;
  :deep .selecter{
    position: absolute;
    top: 1vh;
    right: 1vh;
    z-index: 2;
  }
}

.bx-title{
  font-size: 16px;
}
</style>
